<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商搜索</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF4400',
                        secondary: '#0066CC',
                        neutral: '#F5F5F5',
                        dark: '#333333'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .search-shadow {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            .product-card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .product-card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3">
            <div class="flex items-center justify-between">
                <!-- Logo -->
                <div class="flex items-center space-x-2">
                    <i class="fa fa-shopping-bag text-primary text-3xl"></i>
                    <span class="text-xl font-bold text-primary">电商搜索</span>
                </div>

                <!-- 搜索框 -->
                <div class="relative flex-grow max-w-2xl mx-4">
                    <input type="text" id="search-input" placeholder="搜索商品..."
                           class="w-full py-2 px-4 pr-10 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                    <button id="search-button" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-search text-lg"></i>
                    </button>
                </div>

                <!-- 用户信息 -->
                <div class="flex items-center space-x-4">
                    <button id="login-button" class="text-gray-700 hover:text-primary transition-colors">
                        <i class="fa fa-user-circle-o text-xl mr-1"></i>
                        <span>登录</span>
                    </button>
                    <button id="cart-button" class="relative text-gray-700 hover:text-primary transition-colors">
                        <i class="fa fa-shopping-cart text-xl"></i>
                        <span class="absolute -top-2 -right-2 bg-primary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
                    </button>
                </div>
            </div>

            <!-- 分类导航 -->
            <nav class="mt-3 overflow-x-auto scrollbar-hide">
                <ul class="flex space-x-6 pb-2">
                    <li><a href="#" class="font-medium text-primary border-b-2 border-primary pb-1">全部商品</a></li>
                    <li><a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors pb-1">电子产品</a></li>
                    <li><a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors pb-1">服装鞋帽</a></li>
                    <li><a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors pb-1">家居用品</a></li>
                    <li><a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors pb-1">美妆个护</a></li>
                    <li><a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors pb-1">母婴用品</a></li>
                    <li><a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors pb-1">食品饮料</a></li>
                    <li><a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors pb-1">图书音像</a></li>
                    <li><a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors pb-1">运动户外</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 搜索结果统计 -->
        <div class="mb-6">
            <h1 id="search-results-title" class="text-2xl font-bold">搜索结果</h1>
            <p id="search-results-count" class="text-gray-500 mt-1">找到 <span id="result-count">0</span> 个结果</p>
        </div>

        <!-- 筛选和排序 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <!-- 筛选条件 -->
                <div class="flex flex-wrap gap-3">
                    <div class="relative">
                        <select id="category-filter" class="appearance-none bg-gray-50 border border-gray-200 text-gray-700 py-2 pl-3 pr-8 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="">全部分类</option>
                            <option value="电子产品">电子产品</option>
                            <option value="服装鞋帽">服装鞋帽</option>
                            <option value="家居用品">家居用品</option>
                            <option value="美妆个护">美妆个护</option>
                            <option value="母婴用品">母婴用品</option>
                            <option value="食品饮料">食品饮料</option>
                            <option value="图书音像">图书音像</option>
                            <option value="运动户外">运动户外</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                            <i class="fa fa-chevron-down text-xs"></i>
                        </div>
                    </div>

                    <div class="relative">
                        <select id="brand-filter" class="appearance-none bg-gray-50 border border-gray-200 text-gray-700 py-2 pl-3 pr-8 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="">全部品牌</option>
                            <!-- 品牌选项会通过JS动态填充 -->
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                            <i class="fa fa-chevron-down text-xs"></i>
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        <span class="text-gray-600">价格:</span>
                        <input type="number" id="min-price" placeholder="最低" class="w-20 bg-gray-50 border border-gray-200 text-gray-700 py-2 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <span class="text-gray-600">-</span>
                        <input type="number" id="max-price" placeholder="最高" class="w-20 bg-gray-50 border border-gray-200 text-gray-700 py-2 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>
                </div>

                <!-- 排序选项 -->
                <div class="flex items-center gap-3">
                    <span class="text-gray-600">排序:</span>
                    <div class="relative">
                        <select id="sort-filter" class="appearance-none bg-gray-50 border border-gray-200 text-gray-700 py-2 pl-3 pr-8 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="relevance">按相关度</option>
                            <option value="price_asc">价格从低到高</option>
                            <option value="price_desc">价格从高到低</option>
                            <option value="rating">按评分</option>
                            <option value="sales">按销量</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                            <i class="fa fa-chevron-down text-xs"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 搜索结果 -->
        <div id="search-results" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            <!-- 搜索结果会通过JS动态填充 -->
            <div class="col-span-full text-center py-12">
                <i class="fa fa-search text-5xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">请输入关键词进行搜索</p>
            </div>
        </div>

        <!-- 分页 -->
        <div class="mt-10 flex justify-center">
            <nav class="inline-flex rounded-md shadow-sm" aria-label="Pagination">
                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">上一页</span>
                    <i class="fa fa-chevron-left"></i>
                </a>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                    1
                </a>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    2
                </a>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    3
                </a>
                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                    ...
                </span>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    8
                </a>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                    9
                </a>
                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">下一页</span>
                    <i class="fa fa-chevron-right"></i>
                </a>
            </nav>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="container mx-auto px-4 py-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">关于我们</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">公司介绍</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">招贤纳士</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">联系我们</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">帮助中心</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">购物指南</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">支付方式</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">配送说明</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">售后服务</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">客户服务</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">意见反馈</a></li>
                        <li class="flex items-center text-gray-600">
                            <i class="fa fa-phone mr-2"></i>
                            <span>400-123-4567</span>
                        </li>
                        <li class="flex items-center text-gray-600">
                            <i class="fa fa-envelope-o mr-2"></i>
                            <span>service@example.com</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4 mb-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-primary hover:text-white transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-primary hover:text-white transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-primary hover:text-white transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                    </div>
                    <p class="text-gray-600">扫描二维码下载APP</p>
                    <div class="mt-2 w-32 h-32 bg-gray-100 rounded-md flex items-center justify-center">
                        <i class="fa fa-qrcode text-4xl text-gray-400"></i>
                    </div>
                </div>
            </div>
            <div class="mt-8 pt-6 border-t border-gray-200 text-center text-gray-500 text-sm">
                <p>© 2025 电商搜索. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 登录模态框 -->
    <div id="login-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6 transform transition-all">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">用户登录</h3>
                <button id="close-login-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form>
                <div class="mb-4">
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <input type="text" id="username" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                </div>
                <div class="mb-6">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <input type="password" id="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                </div>
                <button type="button" id="submit-login" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-colors">登录</button>
            </form>
            <div class="mt-4 text-center">
                <p class="text-gray-600">还没有账号？<a href="#" class="text-primary hover:underline">立即注册</a></p>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentUserId = null;
        let brands = [];

        // DOM元素
        const searchInput = document.getElementById('search-input');
        const searchButton = document.getElementById('search-button');
        const searchResults = document.getElementById('search-results');
        const resultCount = document.getElementById('result-count');
        const searchResultsTitle = document.getElementById('search-results-title');
        const categoryFilter = document.getElementById('category-filter');
        const brandFilter = document.getElementById('brand-filter');
        const minPrice = document.getElementById('min-price');
        const maxPrice = document.getElementById('max-price');
        const sortFilter = document.getElementById('sort-filter');
        const loginButton = document.getElementById('login-button');
        const loginModal = document.getElementById('login-modal');
        const closeLoginModal = document.getElementById('close-login-modal');
        const submitLogin = document.getElementById('submit-login');

        // 初始化品牌下拉框
        function initBrandFilter() {
            // 这里应该从API获取品牌列表
            // 为简化示例，我们手动添加几个品牌
            brands = ["华为", "小米", "苹果", "三星", "耐克", "阿迪达斯", "优衣库", "美的", "海尔"];

            // 清空现有选项
            brandFilter.innerHTML = '<option value="">全部品牌</option>';

            // 添加品牌选项
            brands.forEach(brand => {
                const option = document.createElement('option');
                option.value = brand;
                option.textContent = brand;
                brandFilter.appendChild(option);
            });
        }

        // 显示登录模态框
        function showLoginModal() {
            loginModal.classList.remove('hidden');
            loginModal.classList.add('flex');
        }

        // 隐藏登录模态框
        function hideLoginModal() {
            loginModal.classList.add('hidden');
            loginModal.classList.remove('flex');
        }

        // 登录处理
        function handleLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 简单验证
            if (username && password) {
                // 模拟登录成功
                currentUserId = Math.floor(Math.random() * 500) + 1; // 随机分配一个用户ID
                loginButton.innerHTML = `<i class="fa fa-user-circle-o text-xl mr-1"></i><span>${username}</span>`;
                hideLoginModal();

                // 显示登录成功消息
                alert(`欢迎回来，${username}!`);

                // 使用用户ID重新搜索
                if (searchInput.value.trim()) {
                    performSearch();
                }
            } else {
                alert('请输入用户名和密码');
            }
        }

        // 执行搜索
        function performSearch() {
            const query = searchInput.value.trim();
            const category = categoryFilter.value;
            const brand = brandFilter.value;
            const minPriceVal = minPrice.value ? parseFloat(minPrice.value) : null;
            const maxPriceVal = maxPrice.value ? parseFloat(maxPrice.value) : null;
            const sortBy = sortFilter.value;

            // 更新搜索结果标题
            searchResultsTitle.textContent = query ? `搜索"${query}"的结果` : '搜索结果';

            // 显示加载状态
            searchResults.innerHTML = `
                <div class="col-span-full text-center py-12">
                    <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
                    <p class="text-gray-500 mt-4">正在搜索...</p>
                </div>
            `;

            // 模拟API请求延迟
            setTimeout(() => {
                // 生成模拟搜索结果
                const results = generateMockSearchResults(
                    query,
                    currentUserId,
                    category,
                    brand,
                    minPriceVal,
                    maxPriceVal,
                    sortBy
                );

                // 更新结果计数
                resultCount.textContent = results.length;

                // 显示搜索结果
                if (results.length > 0) {
                    displaySearchResults(results);
                } else {
                    searchResults.innerHTML = `
                        <div class="col-span-full text-center py-12">
                            <i class="fa fa-search text-5xl text-gray-300 mb-4"></i>
                            <p class="text-gray-500">没有找到与"${query}"相关的商品</p>
                            <p class="text-gray-400 mt-2">请尝试调整搜索条件或使用其他关键词</p>
                        </div>
                    `;
                }
            }, 800);
        }

        // 显示搜索结果
        function displaySearchResults(results) {
            searchResults.innerHTML = '';

            results.forEach(product => {
                const productCard = document.createElement('div');
                productCard.className = 'bg-white rounded-lg shadow-sm overflow-hidden product-card-hover';
                productCard.innerHTML = `
                    <div class="relative">
                        <img src="${product.images[0]}" alt="${product.name}" class="w-full h-48 object-cover">
                        ${product.rating >= 4.5 ? '<span class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded-full">优质商品</span>' : ''}
                        ${product.sales > 1000 ? `<span class="absolute top-2 right-2 bg-secondary text-white text-xs px-2 py-1 rounded-full">热卖 ${Math.floor(product.sales/1000)}k+</span>` : ''}
                    </div>
                    <div class="p-4">
                        <div class="flex items-center mb-2">
                            <span class="text-primary font-bold text-lg">¥${product.price}</span>
                            ${product.original_price ? `<span class="text-gray-400 line-through text-sm ml-2">¥${product.original_price}</span>` : ''}
                        </div>
                        <h3 class="font-medium text-gray-800 mb-2 line-clamp-2">${product.name}</h3>
                        <div class="flex items-center mb-3">
                            <div class="flex text-yellow-400">
                                ${generateStarRating(product.rating)}
                            </div>
                            <span class="text-gray-500 text-sm ml-1">${product.rating} (${product.reviews || 0}条评价)</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500 text-sm">${product.brand}</span>
                            <button class="text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-shopping-cart"></i>
                            </button>
                        </div>
                    </div>
                `;
                searchResults.appendChild(productCard);
            });
        }

        // 生成星级评分HTML
        function generateStarRating(rating) {
            let stars = '';
            const fullStars = Math.floor(rating);
            const halfStar = rating % 1 >= 0.5;
            const emptyStars = 5 - fullStars - (halfStar ? 1 : 0);

            for (let i = 0; i < fullStars; i++) {
                stars += '<i class="fa fa-star"></i>';
            }

            if (halfStar) {
                stars += '<i class="fa fa-star-half-o"></i>';
            }

            for (let i = 0; i < emptyStars; i++) {
                stars += '<i class="fa fa-star-o"></i>';
            }

            return stars;
        }

        // 生成模拟搜索结果
        function generateMockSearchResults(query, userId, category, brand, minPrice, maxPrice, sortBy) {
            // 这里应该是API调用，为简化示例，我们直接生成模拟数据
            const results = [];

            // 商品数据模板
            const products = [
                { id: 1, name: "华为 Mate 50 Pro 智能手机", category: "电子产品", brand: "华为", price: 6999, rating: 4.8, sales: 5600, images: ["https://picsum.photos/seed/huawei1/200/200"] },
                { id: 2, name: "小米 13 旗舰手机", category: "电子产品", brand: "小米", price: 3999, rating: 4.7, sales: 8900, images: ["https://picsum.photos/seed/xiaomi1/200/200"] },
                { id: 3, name: "苹果 iPhone 14 Pro Max", category: "电子产品", brand: "苹果", price: 9999, rating: 4.9, sales: 12000, images: ["https://picsum.photos/seed/iphone1/200/200"] },
                { id: 4, name: "三星 Galaxy S23 Ultra", category: "电子产品", brand: "三星", price: 8999, rating: 4.6, sales: 3200, images: ["https://picsum.photos/seed/samsung1/200/200"] },
                { id: 5, name: "耐克 Air Max 运动鞋", category: "服装鞋帽", brand: "耐克", price: 1299, rating: 4.7, sales: 7800, images: ["https://picsum.photos/seed/nike1/200/200"] },
                { id: 6, name: "阿迪达斯 Ultraboost 跑鞋", category: "服装鞋帽", brand: "阿迪达斯", price: 1199, rating: 4.5, sales: 6500, images: ["https://picsum.photos/seed/adidas1/200/200"] },
                { id: 7, name: "优衣库 男士纯棉T恤", category: "服装鞋帽", brand: "优衣库", price: 99, rating: 4.4, sales: 25000, images: ["https://picsum.photos/seed/uniqlo1/200/200"] },
                { id: 8, name: "美的 智能变频空调", category: "家居用品", brand: "美的", price: 3499, rating: 4.6, sales: 12000, images: ["https://picsum.photos/seed/midea1/200/200"] },
                { id: 9, name: "海尔 对开门冰箱", category: "家居用品", brand: "海尔", price: 5999, rating: 4.8, sales: 8700, images: ["https://picsum.photos/seed/haier1/200/200"] },
                { id: 10, name: "雅诗兰黛 小棕瓶精华液", category: "美妆个护", brand: "雅诗兰黛", price: 720, rating: 4.9, sales: 15000, images: ["https://picsum.photos/seed/estee1/200/200"] },
                { id: 11, name: "兰蔻 粉水爽肤水", category: "美妆个护", brand: "兰蔻", price: 420, rating: 4.7, sales: 12000, images: ["https://picsum.photos/seed/lancome1/200/200"] },
                { id: 12, name: "帮宝适 超薄纸尿裤", category: "母婴用品", brand: "帮宝适", price: 129, rating: 4.6, sales: 32000, images: ["https://picsum.photos/seed/pampers1/200/200"] },
                { id: 13, name: "德芙 丝滑牛奶巧克力", category: "食品饮料", brand: "德芙", price: 49.9, rating: 4.5, sales: 56000, images: ["https://picsum.photos/seed/dove1/200/200"] },
                { id: 14, name: "Kindle Paperwhite 电子书阅读器", category: "电子产品", brand: "亚马逊", price: 1199, rating: 4.7, sales: 9800, images: ["https://picsum.photos/seed/kindle1/200/200"] },
                { id: 15, name: "迪卡侬 专业登山包", category: "运动户外", brand: "迪卡侬", price: 399, rating: 4.4, sales: 7600, images: ["https://picsum.photos/seed/decathlon1/200/200"] }
            ];

            // 过滤商品
            let filteredProducts = products.filter(product => {
                // 关键词过滤
                if (query && !product.name.toLowerCase().includes(query.toLowerCase())) {
                    return false;
                }

                // 分类过滤
                if (category && product.category !== category) {
                    return false;
                }

                // 品牌过滤
                if (brand && product.brand !== brand) {
                    return false;
                }

                // 价格过滤
                if (minPrice && product.price < minPrice) {
                    return false;
                }

                if (maxPrice && product.price > maxPrice) {
                    return false;
                }

                return true;
            });

            // 排序
            if (sortBy === "price_asc") {
                filteredProducts.sort((a, b) => a.price - b.price);
            } else if (sortBy === "price_desc") {
                filteredProducts.sort((a, b) => b.price - a.price);
            } else if (sortBy === "rating") {
                filteredProducts.sort((a, b) => b.rating - a.rating);
            } else if (sortBy === "sales") {
                filteredProducts.sort((a, b) => b.sales - a.sales);
            }

            // 如果有用户ID，添加协同过滤推荐
            if (userId) {
                // 模拟协同过滤推荐
                const cfRecommendations = [
                    { id: 16, name: "华为 FreeBuds Pro 2 无线耳机", category: "电子产品", brand: "华为", price: 1299, rating: 4.8, sales: 8700, images: ["https://picsum.photos/seed/huawei2/200/200"] },
                    { id: 17, name: "小米手环 7 Pro", category: "电子产品", brand: "小米", price: 249, rating: 4.6, sales: 15000, images: ["https://picsum.photos/seed/xiaomi2/200/200"] },
                    { id: 18, name: "苹果 AirPods Pro", category: "电子产品", brand: "苹果", price: 1799, rating: 4.9, sales: 22000, images: ["https://picsum.photos/seed/airpods1/200/200"] }
                ];

                // 将协同过滤推荐添加到结果前面
                filteredProducts = [...cfRecommendations, ...filteredProducts];

                // 去重
                const uniqueProducts = [];
                const seenIds = new Set();

                filteredProducts.forEach(product => {
                    if (!seenIds.has(product.id)) {
                        seenIds.add(product.id);
                        uniqueProducts.push(product);
                    }
                });

                filteredProducts = uniqueProducts;
            }

            return filteredProducts;
        }

        // 事件监听
        function setupEventListeners() {
            // 搜索按钮点击事件
            searchButton.addEventListener('click', performSearch);

            // 搜索框回车事件
            searchInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });

            // 筛选和排序条件变化事件
            categoryFilter.addEventListener('change', performSearch);
            brandFilter.addEventListener('change', performSearch);
            minPrice.addEventListener('change', performSearch);
            maxPrice.addEventListener('change', performSearch);
            sortFilter.addEventListener('change', performSearch);

            // 登录相关事件
            loginButton.addEventListener('click', showLoginModal);
            closeLoginModal.addEventListener('click', hideLoginModal);
            submitLogin.addEventListener('click', handleLogin);

            // 点击模态框外部关闭
            loginModal.addEventListener('click', (e) => {
                if (e.target === loginModal) {
                    hideLoginModal();
                }
            });
        }

        // 初始化应用
        function initApp() {
            initBrandFilter();
            setupEventListeners();
        }

        // 页面加载完成后初始化应用
        document.addEventListener('DOMContentLoaded', initApp);
    </script>
</body>
</html>